<template>
  <div>

    <div class="nav">
      <van-nav-bar
        title="全部分类"
      />

      <van-search class="search" shape="round" v-model="value" placeholder="搜索商品" input-align="center" />
    </div>

    <div class="select">
      <van-tree-select height="100%" :items="items" :main-active-index.sync="active" @click-nav="fn">
        <template #content >
          <van-grid :column-num="3" >
            <van-grid-item @click="details" v-for="(item,value) in list" :key="value" :icon="item.image.external_url" :text="item.name" />
          </van-grid>
        </template>
      </van-tree-select>
    </div>

  </div>
</template>

<script>
import { classRender } from '@/api/user'
import router from '@/router'
export default {
  name: 'ClassView',
  data () {
    return {
      value: '',
      active: 0,
      items: [],
      list: []
    }
  },
  created () {
    this.render()
  },
  methods: {
    async render () {
      const res = await classRender()
      console.log(res)
      this.list = res.data.list[0].children
      this.items = res.data.list.map((item, index) => {
        return { text: item.name }
      })
    },
    async fn (index) {
      const res = await classRender()
      this.list = res.data.list[index].children
    },
    details () {
      router.push('/details')
    }
  }
}
</script>

<style scoped>

</style>
